<template>
  <el-col class="info-wrapper" :span="23">
    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">生产企业</span>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">工厂编号</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">组织人数</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">工厂名称</el-col>
          <el-col class="col-content" :span="18"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">注册地址</el-col>
          <el-col class="col-content" :span="18"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">通讯地址</el-col>
          <el-col class="col-content" :span="18"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">生产地址</el-col>
          <el-col class="col-content" :span="18"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">县/区级地址</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">县/区级代码</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">分公司</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">组织联系传真</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">联系人</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">联系人职务</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">联系人手机</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">联系人邮箱</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">法人</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">管理者代表</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" style="border-bottom: 1px solid #bbb;" :span="24">
          <el-col class="col-content title-span" style="height: 23px;" :span="6">备注</el-col>
          <el-col class="col-content" :span="18"><span></span></el-col>
        </el-col>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label">项目信息</span>
        <el-table border :data="uploadDocumentData">
          <el-table-column prop="date" label="合同编号"> </el-table-column>
          <el-table-column prop="date" label="委托人"> </el-table-column>
          <el-table-column prop="date" label="生产者"> </el-table-column>
          <el-table-column prop="date" label="生产企业"> </el-table-column>
          <el-table-column prop="date" label="小类"> </el-table-column>
          <el-table-column prop="date" label="产品名称"> </el-table-column>
          <el-table-column prop="date" label="产品型号"> </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">审核文档</span>
        <el-button type="primary" style="margin-bottom: 20px;">批量打包下载</el-button>
        <el-col :span="24">
          <el-table border :data="uploadDocumentData">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="date" label="文档名"> </el-table-column>
            <el-table-column prop="date" label="文档类型"> </el-table-column>
            <el-table-column prop="date" label="备注"> </el-table-column>
            <el-table-column prop="date" label="上传时间"> </el-table-column>
            <el-table-column prop="date" label="上传人"> </el-table-column>
            <el-table-column prop="date" label="下载"> </el-table-column>
          </el-table>
        </el-col>
      </el-tab-pane>
    </el-tabs>

    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">评定问题</span>
        <el-table style="margin-bottom: 10px;" border :data="uploadDocumentData">
          <el-table-column prop="date" label="产品名称"> </el-table-column>
          <el-table-column prop="date" label="标准"> </el-table-column>
          <el-table-column prop="date" label="检查类型"> </el-table-column>
          <el-table-column prop="date" label="小类"> </el-table-column>
          <el-table-column prop="date" label="评定人员"> </el-table-column>
        </el-table>

        <el-table border :data="uploadDocumentData" @cell-click="cellEdit">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="date" label="操作" width="60">
            <el-link type="primary">删除</el-link>
          </el-table-column>
          <el-table-column prop="level" label="级别">
            <template #default="{ row }">
              <el-input v-if="row.canLevelEdit" v-model="row.level" @blur="levelFinish(row)"></el-input>
              <span v-else>{{row.level}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="审核组成员"> </el-table-column>
          <el-table-column prop="date" label="问题标准"> </el-table-column>
          <el-table-column prop="date" label="判定规则"> </el-table-column>
          <el-table-column prop="content" label="内容">
            <template #default="{ row }">
              <el-input v-if="row.canContentEdit" v-model="row.content" @blur="contentFinish(row)"></el-input>
              <span v-else>{{row.content}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="审核员整改内容"> </el-table-column>
        </el-table>
        <el-col class="del-table" :span="24">
          <el-col class="del-table-item" :span="3">
            <el-button type="primary">关闭问题</el-button>
          </el-col>
          <el-col class="del-table-item" :span="3">评定日期</el-col>
          <el-col class="del-table-item" :span="5">
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-col>
          <el-col class="del-table-item" :span="13">
            <span style="color: red;">*双击级别、内容即可编辑</span>
          </el-col>
        </el-col>

        <el-table style="margin-bottom: 10px;" border :data="problemList">
          <el-table-column prop="name" align="center" width="80">
            <template slot="header">
              <el-button type="text" @click="addProblemRow">添加一行</el-button>
            </template>
          </el-table-column>
          <el-table-column label="点击添加问题" align="center">
            <el-table-column prop="name" label="级别">
              <el-select v-model="checkPeopleData">
                <el-option label="A" value="preliminary"></el-option>
                <el-option label="B" value="jdWord"></el-option>
                <el-option label="C" value="dbWord"></el-option>
                <el-option label="D" value="stWord"></el-option>
                <el-option label="其他" value="stWord"></el-option>
              </el-select>
            </el-table-column>
            <el-table-column prop="province" label="审核员">
              <el-select
                v-model="checkPeopleData"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-table-column>
            <el-table-column prop="city" label="问题标题">
              <el-select
                v-model="checkPeopleData"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-table-column>
            <el-table-column prop="address" label="判定规则">
              <el-input v-model="a"></el-input>
            </el-table-column>
            <el-table-column prop="zip" label="问题内容">
              <el-input v-model="a" type="textarea" :rows="2"></el-input>
            </el-table-column>
          </el-table-column>
        </el-table>

        <el-button type="primary" class="submit-btn">提交</el-button>

        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="4">文档下载</el-col>
          <el-col class="col-content" :span="20"><span></span></el-col>
        </el-col>
        <el-col class="row-content" style="border-bottom: 1px solid #bbb;" :span="24">
          <el-col class="col-content title-span" :span="4">文档上传</el-col>
          <el-col class="col-content" :span="20"><span></span></el-col>
        </el-col>
      </el-tab-pane>
    </el-tabs>
  </el-col>
</template>

<script>
export default {
  name: 'assessManageDetail',
  data() {
    return {
      checkPeopleData: [], // 检查派人表格数据
      infoTemplateList: [], // 资料模版列表
      uploadDocumentData: [
        {
          date: 123,
          level: 234,
          content: 345,
          canLevelEdit: false,
          canContentEdit: false
        }
    ], // 文档上传表格数据
      checkSampleData: [], // 检验抽样表格数据
      evaluateProblemData: [], // 文档上传表格数据
      problemList: [{}], // 添加问题列表
      a: '',
      canLevelEdit: false,
      canContentEdit: false,
    };
  },
  mounted() {
    this.getInfoTemplateList();
    this.queryTableData();
    this.queryCheckPeopleData();
  },
  methods: {
    getInfoTemplateList() {
      // todo：获取资料模版列表接口
    },
    queryTableData() {
      // todo：获取表格数据接口
    },
    queryCheckPeopleData() {
      // todo：获取检查派人数据接口
    },
    addProblemRow() {
      this.problemList.push({})
    },
    cellEdit(row, col) {
      if (col.property === 'level') {
        row.canLevelEdit = true;
      }
      if (col.property === 'content') {
        row.canContentEdit = true;
      }
    },
    levelFinish(row) {
      row.canLevelEdit = false;
    },
    contentFinish(row) {
      row.canContentEdit = false;
    }
  },
};
</script>

<style lang="less" scoped>
.info-wrapper {
  font-family: Source Han Sans CN;
  font-weight: 400;
  height: 100%;

  .tabs-card {
    margin-bottom: 15px;
  }

  .row-content {
    border-top: 1px solid #bbb;
    border-left: 1px solid #bbb;
  }

  .title-span {
    text-align: center;
    background-color: #f0f5f8;
    justify-content: end;
    padding-right: 20px;
  }

  .col-content {
    min-height: 40px;
    border-right: 1px solid #bbb;
    padding-left: 4px;
    display: flex;
    align-items: center;
  }

  .table-span {
    padding: 8px;
    border-right: 1px solid #bbb;
  }
}

/deep/ .el-input__icon {
  line-height: 30px;
}

.submit-btn {
  width: 80px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-bottom: 15px;
}

.del-table {
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  border-left: 1px solid #bbb;
  margin-bottom: 10px;
}

.del-table-item {
  min-height: 50px;
  border-right: 1px solid #bbb;
  padding-left: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
